<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">销售出库详情页</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : outSaleDetailData.status == 0 }">待出库</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 1 }">出库中</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 2 }">已完成</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>收货人：</span>{{ outSaleDetailData.name ? outSaleDetailData.name : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>联系电话：</span>{{ outSaleDetailData.telephone ? outSaleDetailData.telephone : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item mb80">
                <el-col :span="24">
                    <span>收货地址：</span>{{ outSaleDetailData.address ? outSaleDetailData.address : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item" v-if="outSaleDetailData.generateType !== '3'">
                <el-col :span="8">
                    <span>计划编码：</span>{{ outSaleDetailData.planCode ? outSaleDetailData.planCode : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>产品批号：</span>{{ outSaleDetailData.batchNumber ? outSaleDetailData.batchNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>产品名称：</span>{{ outSaleDetailData.productName ? outSaleDetailData.productName : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>产品规格：</span>{{ outSaleDetailData.productSpace ? outSaleDetailData.productSpace : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>计划开始时间：</span>{{ outSaleDetailData.startTime ? new Date(outSaleDetailData.startTime).toLocaleString() : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>计划结束时间：</span>{{ outSaleDetailData.endTime ? new Date(outSaleDetailData.endTime).toLocaleString() : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>计划出库数量：</span>{{ outSaleDetailData.planStoreOut ? outSaleDetailData.planStoreOut : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>实际出库数量：</span>{{ outSaleDetailData.storeOut ? outSaleDetailData.storeOut : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>状态：</span>
                    <font v-if="outSaleDetailData.status == 0" style="color:#13C2C2">待出库</font>
                    <font v-if="outSaleDetailData.status == 1" style="color:#52C41A">出库中</font>
                    <font v-if="outSaleDetailData.status == 2" style="color:#52C41A">已完成</font>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>备注：</span>{{ outSaleDetailData.remark ? outSaleDetailData.remark : '暂无' }}
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { detailProductOutSale } from "@/api/system/outSale/outSale"
export default {
    name: "outSaleDetail",
    data() {
        return {
            id: '',
            outSaleDetailData: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetailData()
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            detailProductOutSale(this.id).then(res => {
                // console.log(res)
                this.outSaleDetailData = res.data
            })
        }
    }
}
</script>